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

fix(chat): make linked reference removal focusable (#1156)

Browse Source 
Co-authored-by: Isaac Sanchez <isanchez-hawkins@arize.com>
This commit is contained in:
Isaac Sanchez-Hawkins
2026-05-08 16:05:22 +03:00
committed by GitHub
co-authored by Isaac Sanchez
parent 817fafbe29
commit 8f1e5c0085
1 changed files with 61 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatInput.tsx
+20 -16
View File
@@ -3408,10 +3408,11 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
{/* Linked Issue row */} {/* Linked Issue row */}
{linkedIssue && !isVSCode && ( {linkedIssue && !isVSCode && (
<div className="pb-2 w-full px-1"> <div className="pb-2 w-full px-1">
<div className="flex w-full items-center gap-1.5 text-sm h-5 px-1">
<button <button
type="button" type="button"
onClick={() => setIssuePickerOpen(true)} onClick={() => setIssuePickerOpen(true)}
className="flex w-full items-center gap-1.5 text-sm hover:opacity-80 transition-opacity text-left h-5 px-1" className="flex min-w-0 flex-1 items-center gap-1.5 text-left hover:opacity-80 transition-opacity"
> >
{linkedIssue.author?.avatarUrl && ( {linkedIssue.author?.avatarUrl && (
<img <img
@@ -3429,37 +3430,39 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<span className="text-foreground truncate"> <span className="text-foreground truncate">
{linkedIssue.title} {linkedIssue.title}
</span> </span>
</button>
<span className="flex items-center gap-0.5 flex-shrink-0"> <span className="flex items-center gap-0.5 flex-shrink-0">
<a <a
href={linkedIssue.url} href={linkedIssue.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors" className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
aria-label={t('chat.chatInput.linked.issue.openInBrowserAria')} aria-label={t('chat.chatInput.linked.issue.openInBrowserAria')}
> >
<RiExternalLinkLine className="h-4 w-4 text-muted-foreground" /> <RiExternalLinkLine className="h-4 w-4 text-muted-foreground" />
</a> </a>
<span <button
onClick={(e) => { type="button"
e.stopPropagation(); onClick={() => {
setLinkedIssue(null); setLinkedIssue(null);
}} }}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors cursor-pointer" className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
aria-label={t('chat.chatInput.linked.issue.removeAria')} aria-label={t('chat.chatInput.linked.issue.removeAria')}
title={t('chat.chatInput.linked.issue.removeAria')}
> >
<RiCloseLine className="h-4 w-4 text-muted-foreground" /> <RiCloseLine className="h-4 w-4 text-muted-foreground" />
</span>
</span>
</button> </button>
</span>
</div>
</div> </div>
)} )}
{linkedPr && !isVSCode && ( {linkedPr && !isVSCode && (
<div className="pb-2 w-full px-1"> <div className="pb-2 w-full px-1">
<div className="flex w-full items-center gap-1.5 text-sm h-5 px-1">
<button <button
type="button" type="button"
onClick={() => setPrPickerOpen(true)} onClick={() => setPrPickerOpen(true)}
className="flex w-full items-center gap-1.5 text-sm hover:opacity-80 transition-opacity text-left h-5 px-1" className="flex min-w-0 flex-1 items-center gap-1.5 text-left hover:opacity-80 transition-opacity"
> >
{linkedPr.author?.avatarUrl && ( {linkedPr.author?.avatarUrl && (
<img <img
@@ -3480,29 +3483,30 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
<span className="text-muted-foreground flex-shrink-0 typography-meta"> <span className="text-muted-foreground flex-shrink-0 typography-meta">
{linkedPr.head} → {linkedPr.base} {linkedPr.head} → {linkedPr.base}
</span> </span>
</button>
<span className="flex items-center gap-0.5 flex-shrink-0"> <span className="flex items-center gap-0.5 flex-shrink-0">
<a <a
href={linkedPr.url} href={linkedPr.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors" className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
aria-label={t('chat.chatInput.linked.pr.openInBrowserAria')} aria-label={t('chat.chatInput.linked.pr.openInBrowserAria')}
> >
<RiExternalLinkLine className="h-4 w-4 text-muted-foreground" /> <RiExternalLinkLine className="h-4 w-4 text-muted-foreground" />
</a> </a>
<span <button
onClick={(e) => { type="button"
e.stopPropagation(); onClick={() => {
setLinkedPr(null); setLinkedPr(null);
}} }}
className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors cursor-pointer" className="flex items-center justify-center h-6 w-6 hover:bg-[var(--interactive-hover)] rounded-full transition-colors"
aria-label={t('chat.chatInput.linked.pr.removeAria')} aria-label={t('chat.chatInput.linked.pr.removeAria')}
title={t('chat.chatInput.linked.pr.removeAria')}
> >
<RiCloseLine className="h-4 w-4 text-muted-foreground" /> <RiCloseLine className="h-4 w-4 text-muted-foreground" />
</span>
</span>
</button> </button>
</span>
</div>
</div> </div>
)} )}
<MemoStatusRow <MemoStatusRow