Skip to content

feat: Reposition Add Image button inside ChatTextArea #7989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Sep 16, 2025
Merged

feat: Reposition Add Image button inside ChatTextArea #7989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e2587e1
feat: move Add Image button inside ChatTextArea
roomote Sep 15, 2025
8b4d861
fix: corrected C# tree-sitter query (#7813)
mubeen-zulfiqar Sep 15, 2025
67b7a2f
feat: Move slash commands to Settings tab with gear icon for discover…
roomote[bot] Sep 15, 2025
a38740d
Add Z.ai coding plan support (#8003)
daniel-lxs Sep 15, 2025
dac3a7a
chore(deps): bump axios from 1.9.0 to 1.12.0 (#7963)
dependabot[bot] Sep 15, 2025
bdcb43f
Fix context menu is obscured when edit message. (#7951)
NaccOll Sep 16, 2025
ae3771e
feat: add keyboard shortcut for "Add to Context" action (#7908)
roomote[bot] Sep 16, 2025
483a13e
fix: handle ByteString conversion errors in OpenAI embedders (#8008)
daniel-lxs Sep 16, 2025
8c2407f
CONTRIBUTING.md tweaks and issue template rewrite (#8014)
hannesrudolph Sep 16, 2025
77708dc
Merge branch 'main' into feature/move-add-image-button-inside-textarea
brunobergher Sep 16, 2025
b47dc0c
Visual tweaks
brunobergher Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 28 additions & 28 deletions webview-ui/src/components/chat/ChatTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1067,7 +1067,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
: "bg-vscode-input-background",
"transition-background-color duration-150 ease-in-out",
"will-change-background-color",
"min-h-[90px]",
"min-h-[94px]",
"box-border",
"rounded",
"resize-none",
Expand All @@ -1082,7 +1082,32 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
onScroll={() => updateHighlights()}
/>

<div className="absolute top-2 right-2 z-30">
<div className="absolute bottom-2 right-1 z-30 flex flex-col items-center gap-0">
<StandardTooltip content={t("chat:addImages")}>
<button
aria-label={t("chat:addImages")}
disabled={shouldDisableImages}
onClick={!shouldDisableImages ? onSelectImages : undefined}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this redundant disabled state handling intentional? The disabled prop is set to shouldDisableImages, but the onClick handler also checks the same condition. Could we simplify this to:

Suggested change
onClick={!shouldDisableImages ? onSelectImages : undefined}
onClick={onSelectImages}

and let the disabled prop handle preventing clicks?

className={cn(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"text-vscode-descriptionForeground hover:text-vscode-foreground",
"transition-all duration-1000",
"cursor-pointer",
!shouldDisableImages
? "opacity-50 hover:opacity-100 delay-750 pointer-events-auto"
: "opacity-0 pointer-events-none duration-200 delay-0",
!shouldDisableImages &&
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
!shouldDisableImages && "active:bg-[rgba(255,255,255,0.1)]",
shouldDisableImages &&
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
)}>
<Image className="w-4 h-4" />
</button>
</StandardTooltip>
<StandardTooltip content={t("chat:enhancePrompt")}>
<button
aria-label={t("chat:enhancePrompt")}
Expand All @@ -1106,9 +1131,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
</button>
</StandardTooltip>
</div>

<div className="absolute bottom-2 right-2 z-30 flex items-center gap-1">
{isEditMode && (
<StandardTooltip content={t("chat:cancel.title")}>
<button
Expand Down Expand Up @@ -1210,7 +1232,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
/>
<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
</div>
<div className="flex flex-shrink-0 items-center gap-0.5">
<div className="flex flex-shrink-0 items-center gap-0.5 pr-2">
{isTtsPlaying && (
<StandardTooltip content={t("chat:stopTts")}>
<button
Expand All @@ -1232,28 +1254,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
</StandardTooltip>
)}
{!isEditMode ? <IndexingStatusBadge /> : null}
<StandardTooltip content={t("chat:addImages")}>
<button
aria-label={t("chat:addImages")}
disabled={shouldDisableImages}
onClick={!shouldDisableImages ? onSelectImages : undefined}
className={cn(
"relative inline-flex items-center justify-center",
"bg-transparent border-none p-1.5",
"rounded-md min-w-[28px] min-h-[28px]",
"text-vscode-foreground opacity-85",
"transition-all duration-150",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
"active:bg-[rgba(255,255,255,0.1)]",
!shouldDisableImages && "cursor-pointer",
shouldDisableImages &&
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
"mr-1",
)}>
<Image className="w-4 h-4" />
</button>
</StandardTooltip>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions webview-ui/src/components/chat/IndexingStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
size="sm"
aria-label={tooltipText}
className={cn(
"relative h-7 w-7 p-0",
"relative h-5 w-5 p-0",
"text-vscode-foreground opacity-85",
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
Expand All @@ -100,7 +100,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
<Database className="w-4 h-4" />
<span
className={cn(
"absolute top-1 right-1 w-1.5 h-1.5 rounded-full transition-colors duration-200",
"absolute top-0 right-0 w-1.5 h-1.5 rounded-full transition-colors duration-200",
statusColorClass,
)}
/>
Expand Down
Loading