Skip to content

Commit e2587e1

Browse files
roomoteroomote
committed
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
1 parent 9d33c10 commit e2587e1

File tree

1 file changed

+64
-59
lines changed

1 file changed

+64
-59
lines changed

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

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,6 +1084,34 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
10841084
/>
10851085

10861086
<div className="absolute top-2 right-2 z-30">
1087+
<StandardTooltip content={t("chat:addImages")}>
1088+
<button
1089+
aria-label={t("chat:addImages")}
1090+
disabled={shouldDisableImages}
1091+
onClick={!shouldDisableImages ? onSelectImages : undefined}
1092+
className={cn(
1093+
"relative inline-flex items-center justify-center",
1094+
"bg-transparent border-none p-1.5",
1095+
"rounded-md min-w-[28px] min-h-[28px]",
1096+
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1097+
"transition-all duration-1000",
1098+
"cursor-pointer",
1099+
!shouldDisableImages
1100+
? "opacity-50 hover:opacity-100 delay-750 pointer-events-auto"
1101+
: "opacity-0 pointer-events-none duration-200 delay-0",
1102+
!shouldDisableImages &&
1103+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1104+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1105+
!shouldDisableImages && "active:bg-[rgba(255,255,255,0.1)]",
1106+
shouldDisableImages &&
1107+
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1108+
)}>
1109+
<Image className="w-4 h-4" />
1110+
</button>
1111+
</StandardTooltip>
1112+
</div>
1113+
1114+
<div className="absolute bottom-2 right-2 z-30 flex flex-col items-end gap-1">
10871115
<StandardTooltip content={t("chat:enhancePrompt")}>
10881116
<button
10891117
aria-label={t("chat:enhancePrompt")}
@@ -1107,53 +1135,52 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
11071135
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
11081136
</button>
11091137
</StandardTooltip>
1110-
</div>
1111-
1112-
<div className="absolute bottom-2 right-2 z-30 flex items-center gap-1">
1113-
{isEditMode && (
1114-
<StandardTooltip content={t("chat:cancel.title")}>
1138+
<div className="flex items-center gap-1">
1139+
{isEditMode && (
1140+
<StandardTooltip content={t("chat:cancel.title")}>
1141+
<button
1142+
aria-label={t("chat:cancel.title")}
1143+
disabled={false}
1144+
onClick={onCancel}
1145+
className={cn(
1146+
"relative inline-flex items-center justify-center",
1147+
"bg-transparent border-none p-1.5",
1148+
"rounded-md min-w-[28px] min-h-[28px]",
1149+
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
1150+
"transition-all duration-150",
1151+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1152+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1153+
"active:bg-[rgba(255,255,255,0.1)]",
1154+
"cursor-pointer",
1155+
)}>
1156+
<MessageSquareX className="w-4 h-4" />
1157+
</button>
1158+
</StandardTooltip>
1159+
)}
1160+
<StandardTooltip content={t("chat:sendMessage")}>
11151161
<button
1116-
aria-label={t("chat:cancel.title")}
1162+
aria-label={t("chat:sendMessage")}
11171163
disabled={false}
1118-
onClick={onCancel}
1164+
onClick={onSend}
11191165
className={cn(
11201166
"relative inline-flex items-center justify-center",
11211167
"bg-transparent border-none p-1.5",
11221168
"rounded-md min-w-[28px] min-h-[28px]",
1123-
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
1124-
"transition-all duration-150",
1125-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1169+
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1170+
"transition-all duration-200",
1171+
hasInputContent
1172+
? "opacity-100 hover:opacity-100 pointer-events-auto"
1173+
: "opacity-0 pointer-events-none",
1174+
hasInputContent &&
1175+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
11261176
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1127-
"active:bg-[rgba(255,255,255,0.1)]",
1128-
"cursor-pointer",
1177+
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
1178+
hasInputContent && "cursor-pointer",
11291179
)}>
1130-
<MessageSquareX className="w-4 h-4" />
1180+
<SendHorizontal className="w-4 h-4" />
11311181
</button>
11321182
</StandardTooltip>
1133-
)}
1134-
<StandardTooltip content={t("chat:sendMessage")}>
1135-
<button
1136-
aria-label={t("chat:sendMessage")}
1137-
disabled={false}
1138-
onClick={onSend}
1139-
className={cn(
1140-
"relative inline-flex items-center justify-center",
1141-
"bg-transparent border-none p-1.5",
1142-
"rounded-md min-w-[28px] min-h-[28px]",
1143-
"text-vscode-descriptionForeground hover:text-vscode-foreground",
1144-
"transition-all duration-200",
1145-
hasInputContent
1146-
? "opacity-100 hover:opacity-100 pointer-events-auto"
1147-
: "opacity-0 pointer-events-none",
1148-
hasInputContent &&
1149-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1150-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1151-
hasInputContent && "active:bg-[rgba(255,255,255,0.1)]",
1152-
hasInputContent && "cursor-pointer",
1153-
)}>
1154-
<SendHorizontal className="w-4 h-4" />
1155-
</button>
1156-
</StandardTooltip>
1183+
</div>
11571184
</div>
11581185

11591186
{!inputValue && (
@@ -1234,28 +1261,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
12341261
)}
12351262
{!isEditMode ? <SlashCommandsPopover /> : null}
12361263
{!isEditMode ? <IndexingStatusBadge /> : null}
1237-
<StandardTooltip content={t("chat:addImages")}>
1238-
<button
1239-
aria-label={t("chat:addImages")}
1240-
disabled={shouldDisableImages}
1241-
onClick={!shouldDisableImages ? onSelectImages : undefined}
1242-
className={cn(
1243-
"relative inline-flex items-center justify-center",
1244-
"bg-transparent border-none p-1.5",
1245-
"rounded-md min-w-[28px] min-h-[28px]",
1246-
"text-vscode-foreground opacity-85",
1247-
"transition-all duration-150",
1248-
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1249-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1250-
"active:bg-[rgba(255,255,255,0.1)]",
1251-
!shouldDisableImages && "cursor-pointer",
1252-
shouldDisableImages &&
1253-
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1254-
"mr-1",
1255-
)}>
1256-
<Image className="w-4 h-4" />
1257-
</button>
1258-
</StandardTooltip>
12591264
</div>
12601265
</div>
12611266
</div>

0 commit comments

Comments
 (0)