Skip to content

Commit c987417

Browse files
roomote[bot]roomotemubeen-zulfiqarellipsis-dev[bot]brunobergher
authored
feat: Reposition Add Image button inside ChatTextArea (#7989)
* feat: move Add Image button inside ChatTextArea - Moved Add Image button from bottom toolbar to top-right inside text area - Repositioned Enhance Prompt button to be above Send button (bottom-right) - Both buttons now follow similar positioning pattern as Send button - Maintains consistent button styling and transitions * fix: corrected C# tree-sitter query (#7813) * feat: Move slash commands to Settings tab with gear icon for discoverability (#7988) Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Roo Code <[email protected]> Co-authored-by: Bruno Bergher <[email protected]> Co-authored-by: Mubeen Zulfiqar <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * Add Z.ai coding plan support (#8003) * chore(deps): bump axios from 1.9.0 to 1.12.0 (#7963) Bumps [axios](https://github.com/axios/axios) from 1.9.0 to 1.12.0. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](axios/axios@v1.9.0...v1.12.0) --- updated-dependencies: - dependency-name: axios dependency-version: 1.12.0 dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix context menu is obscured when edit message. (#7951) * feat: add keyboard shortcut for "Add to Context" action (#7908) Co-authored-by: daniel-lxs <[email protected]> Co-authored-by: Matt Rubens <[email protected]> * fix: handle ByteString conversion errors in OpenAI embedders (#8008) * CONTRIBUTING.md tweaks and issue template rewrite (#8014) * Visual tweaks --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Roo Code <[email protected]> Co-authored-by: Mubeen Zulfiqar <[email protected]> Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> Co-authored-by: Bruno Bergher <[email protected]> Co-authored-by: Matt Rubens <[email protected]> Co-authored-by: Daniel <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: NaccOll <[email protected]> Co-authored-by: daniel-lxs <[email protected]> Co-authored-by: Hannes Rudolph <[email protected]>
1 parent ee58c5d commit c987417

File tree

2 files changed

+30
-30
lines changed

2 files changed

+30
-30
lines changed

webview-ui/src/components/chat/ChatTextArea.tsx

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1067,7 +1067,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10671067
: "bg-vscode-input-background",
10681068
"transition-background-color duration-150 ease-in-out",
10691069
"will-change-background-color",
1070-
"min-h-[90px]",
1070+
"min-h-[94px]",
10711071
"box-border",
10721072
"rounded",
10731073
"resize-none",
@@ -1082,7 +1082,32 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10821082
onScroll={() => updateHighlights()}
10831083
/>
10841084

1085-
<div className="absolute top-2 right-2 z-30">
1085+
<div className="absolute bottom-2 right-1 z-30 flex flex-col items-center gap-0">
1086+
<StandardTooltip content={t("chat:addImages")}>
1087+
<button
1088+
aria-label={t("chat:addImages")}
1089+
disabled={shouldDisableImages}
1090+
onClick={!shouldDisableImages ? onSelectImages : undefined}
1091+
className={cn(
1092+
"relative inline-flex items-center justify-center",
1093+
"bg-transparent border-none p-1.5",
1094+
"rounded-md min-w-[28px] min-h-[28px]",
1095+
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1096+
"transition-all duration-1000",
1097+
"cursor-pointer",
1098+
!shouldDisableImages
1099+
? "opacity-50 hover:opacity-100 delay-750 pointer-events-auto"
1100+
: "opacity-0 pointer-events-none duration-200 delay-0",
1101+
!shouldDisableImages &&
1102+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1103+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1104+
!shouldDisableImages && "active:bg-[rgba(255,255,255,0.1)]",
1105+
shouldDisableImages &&
1106+
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1107+
)}>
1108+
<Image className="w-4 h-4" />
1109+
</button>
1110+
</StandardTooltip>
10861111
<StandardTooltip content={t("chat:enhancePrompt")}>
10871112
<button
10881113
aria-label={t("chat:enhancePrompt")}
@@ -1106,9 +1131,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
11061131
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
11071132
</button>
11081133
</StandardTooltip>
1109-
</div>
1110-
1111-
<div className="absolute bottom-2 right-2 z-30 flex items-center gap-1">
11121134
{isEditMode && (
11131135
<StandardTooltip content={t("chat:cancel.title")}>
11141136
<button
@@ -1210,7 +1232,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
12101232
/>
12111233
<AutoApproveDropdown triggerClassName="min-w-[28px] text-ellipsis overflow-hidden flex-shrink" />
12121234
</div>
1213-
<div className="flex flex-shrink-0 items-center gap-0.5">
1235+
<div className="flex flex-shrink-0 items-center gap-0.5 pr-2">
12141236
{isTtsPlaying && (
12151237
<StandardTooltip content={t("chat:stopTts")}>
12161238
<button
@@ -1232,28 +1254,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
12321254
</StandardTooltip>
12331255
)}
12341256
{!isEditMode ? <IndexingStatusBadge /> : null}
1235-
<StandardTooltip content={t("chat:addImages")}>
1236-
<button
1237-
aria-label={t("chat:addImages")}
1238-
disabled={shouldDisableImages}
1239-
onClick={!shouldDisableImages ? onSelectImages : undefined}
1240-
className={cn(
1241-
"relative inline-flex items-center justify-center",
1242-
"bg-transparent border-none p-1.5",
1243-
"rounded-md min-w-[28px] min-h-[28px]",
1244-
"text-vscode-foreground opacity-85",
1245-
"transition-all duration-150",
1246-
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1247-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1248-
"active:bg-[rgba(255,255,255,0.1)]",
1249-
!shouldDisableImages && "cursor-pointer",
1250-
shouldDisableImages &&
1251-
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1252-
"mr-1",
1253-
)}>
1254-
<Image className="w-4 h-4" />
1255-
</button>
1256-
</StandardTooltip>
12571257
</div>
12581258
</div>
12591259
</div>

webview-ui/src/components/chat/IndexingStatusBadge.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
9191
size="sm"
9292
aria-label={tooltipText}
9393
className={cn(
94-
"relative h-7 w-7 p-0",
94+
"relative h-5 w-5 p-0",
9595
"text-vscode-foreground opacity-85",
9696
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)]",
9797
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
@@ -100,7 +100,7 @@ export const IndexingStatusBadge: React.FC<IndexingStatusBadgeProps> = ({ classN
100100
<Database className="w-4 h-4" />
101101
<span
102102
className={cn(
103-
"absolute top-1 right-1 w-1.5 h-1.5 rounded-full transition-colors duration-200",
103+
"absolute top-0 right-0 w-1.5 h-1.5 rounded-full transition-colors duration-200",
104104
statusColorClass,
105105
)}
106106
/>

0 commit comments

Comments
 (0)