Skip to content

Commit dd00fc8

Browse files
daniel-lxsdaniel-lxs
authored
feat: Replace title attributes with StandardTooltip in ChatTextArea (#5528)
feat: Replace title attributes with StandardTooltip in ChatTextArea buttons - Added StandardTooltip wrapper for Stop TTS button - Replaced title attributes with StandardTooltip for Enhance Prompt button - Replaced title attributes with StandardTooltip for Send Message button - Replaced title attributes with StandardTooltip for Add Images button Note: The stopTts translation key needs to be added to the localization files
1 parent 8824a71 commit dd00fc8

File tree

19 files changed

+91
-68
lines changed

19 files changed

+91
-68
lines changed

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

Lines changed: 73 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -951,59 +951,63 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
951951
/>
952952

953953
{isTtsPlaying && (
954-
<Button
955-
variant="ghost"
956-
size="icon"
957-
className="absolute top-0 right-0 opacity-25 hover:opacity-100 z-10"
958-
onClick={() => vscode.postMessage({ type: "stopTts" })}>
959-
<VolumeX className="size-4" />
960-
</Button>
954+
<StandardTooltip content={t("chat:stopTts")}>
955+
<Button
956+
variant="ghost"
957+
size="icon"
958+
className="absolute top-0 right-0 opacity-25 hover:opacity-100 z-10"
959+
onClick={() => vscode.postMessage({ type: "stopTts" })}>
960+
<VolumeX className="size-4" />
961+
</Button>
962+
</StandardTooltip>
961963
)}
962964

963965
<div className="absolute top-1 right-1 z-30">
964-
<button
965-
aria-label={t("chat:enhancePrompt")}
966-
title={t("chat:enhancePrompt")}
967-
disabled={sendingDisabled}
968-
onClick={!sendingDisabled ? handleEnhancePrompt : undefined}
969-
className={cn(
970-
"relative inline-flex items-center justify-center",
971-
"bg-transparent border-none p-1.5",
972-
"rounded-md min-w-[28px] min-h-[28px]",
973-
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
974-
"transition-all duration-150",
975-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
976-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
977-
"active:bg-[rgba(255,255,255,0.1)]",
978-
!sendingDisabled && "cursor-pointer",
979-
sendingDisabled &&
980-
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
981-
)}>
982-
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
983-
</button>
966+
<StandardTooltip content={t("chat:enhancePrompt")}>
967+
<button
968+
aria-label={t("chat:enhancePrompt")}
969+
disabled={sendingDisabled}
970+
onClick={!sendingDisabled ? handleEnhancePrompt : undefined}
971+
className={cn(
972+
"relative inline-flex items-center justify-center",
973+
"bg-transparent border-none p-1.5",
974+
"rounded-md min-w-[28px] min-h-[28px]",
975+
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
976+
"transition-all duration-150",
977+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
978+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
979+
"active:bg-[rgba(255,255,255,0.1)]",
980+
!sendingDisabled && "cursor-pointer",
981+
sendingDisabled &&
982+
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
983+
)}>
984+
<WandSparkles className={cn("w-4 h-4", isEnhancingPrompt && "animate-spin")} />
985+
</button>
986+
</StandardTooltip>
984987
</div>
985988

986989
<div className="absolute bottom-1 right-1 z-30">
987-
<button
988-
aria-label={t("chat:sendMessage")}
989-
title={t("chat:sendMessage")}
990-
disabled={sendingDisabled}
991-
onClick={!sendingDisabled ? onSend : undefined}
992-
className={cn(
993-
"relative inline-flex items-center justify-center",
994-
"bg-transparent border-none p-1.5",
995-
"rounded-md min-w-[28px] min-h-[28px]",
996-
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
997-
"transition-all duration-150",
998-
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
999-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1000-
"active:bg-[rgba(255,255,255,0.1)]",
1001-
!sendingDisabled && "cursor-pointer",
1002-
sendingDisabled &&
1003-
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1004-
)}>
1005-
<SendHorizontal className="w-4 h-4" />
1006-
</button>
990+
<StandardTooltip content={t("chat:sendMessage")}>
991+
<button
992+
aria-label={t("chat:sendMessage")}
993+
disabled={sendingDisabled}
994+
onClick={!sendingDisabled ? onSend : undefined}
995+
className={cn(
996+
"relative inline-flex items-center justify-center",
997+
"bg-transparent border-none p-1.5",
998+
"rounded-md min-w-[28px] min-h-[28px]",
999+
"opacity-60 hover:opacity-100 text-vscode-descriptionForeground hover:text-vscode-foreground",
1000+
"transition-all duration-150",
1001+
"hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1002+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1003+
"active:bg-[rgba(255,255,255,0.1)]",
1004+
!sendingDisabled && "cursor-pointer",
1005+
sendingDisabled &&
1006+
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1007+
)}>
1008+
<SendHorizontal className="w-4 h-4" />
1009+
</button>
1010+
</StandardTooltip>
10071011
</div>
10081012

10091013
{!inputValue && (
@@ -1170,27 +1174,28 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
11701174

11711175
<div className={cn("flex", "items-center", "gap-0.5", "shrink-0")}>
11721176
<IndexingStatusBadge />
1173-
<button
1174-
aria-label={t("chat:addImages")}
1175-
title={t("chat:addImages")}
1176-
disabled={shouldDisableImages}
1177-
onClick={!shouldDisableImages ? onSelectImages : undefined}
1178-
className={cn(
1179-
"relative inline-flex items-center justify-center",
1180-
"bg-transparent border-none p-1.5",
1181-
"rounded-md min-w-[28px] min-h-[28px]",
1182-
"text-vscode-foreground opacity-85",
1183-
"transition-all duration-150",
1184-
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1185-
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1186-
"active:bg-[rgba(255,255,255,0.1)]",
1187-
!shouldDisableImages && "cursor-pointer",
1188-
shouldDisableImages &&
1189-
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1190-
"mr-1",
1191-
)}>
1192-
<Image className="w-4 h-4" />
1193-
</button>
1177+
<StandardTooltip content={t("chat:addImages")}>
1178+
<button
1179+
aria-label={t("chat:addImages")}
1180+
disabled={shouldDisableImages}
1181+
onClick={!shouldDisableImages ? onSelectImages : undefined}
1182+
className={cn(
1183+
"relative inline-flex items-center justify-center",
1184+
"bg-transparent border-none p-1.5",
1185+
"rounded-md min-w-[28px] min-h-[28px]",
1186+
"text-vscode-foreground opacity-85",
1187+
"transition-all duration-150",
1188+
"hover:opacity-100 hover:bg-[rgba(255,255,255,0.03)] hover:border-[rgba(255,255,255,0.15)]",
1189+
"focus:outline-none focus-visible:ring-1 focus-visible:ring-vscode-focusBorder",
1190+
"active:bg-[rgba(255,255,255,0.1)]",
1191+
!shouldDisableImages && "cursor-pointer",
1192+
shouldDisableImages &&
1193+
"opacity-40 cursor-not-allowed grayscale-[30%] hover:bg-transparent hover:border-[rgba(255,255,255,0.08)] active:bg-transparent",
1194+
"mr-1",
1195+
)}>
1196+
<Image className="w-4 h-4" />
1197+
</button>
1198+
</StandardTooltip>
11941199
</div>
11951200
</div>
11961201
</div>

‎webview-ui/src/i18n/locales/ca/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "Millora la sol·licitud amb context addicional",
106106
"addImages": "Afegeix imatges al missatge",
107107
"sendMessage": "Envia el missatge",
108+
"stopTts": "Atura la síntesi de veu",
108109
"typeMessage": "Escriu un missatge...",
109110
"typeTask": "Escriu la teva tasca aquí...",
110111
"addContext": "@ per afegir context, / per canviar de mode",

‎webview-ui/src/i18n/locales/de/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "Prompt mit zusätzlichem Kontext verbessern",
106106
"addImages": "Bilder zur Nachricht hinzufügen",
107107
"sendMessage": "Nachricht senden",
108+
"stopTts": "Text-in-Sprache beenden",
108109
"typeMessage": "Nachricht eingeben...",
109110
"typeTask": "Gib deine Aufgabe hier ein...",
110111
"addContext": "@ für Kontext, / zum Moduswechsel",

‎webview-ui/src/i18n/locales/en/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@
120120
"enhancePromptDescription": "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",
121121
"addImages": "Add images to message",
122122
"sendMessage": "Send message",
123+
"stopTts": "Stop text-to-speech",
123124
"typeMessage": "Type a message...",
124125
"typeTask": "Type your task here...",
125126
"addContext": "@ to add context, / to switch modes",

‎webview-ui/src/i18n/locales/es/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "Mejorar el mensaje con contexto adicional",
106106
"addImages": "Agregar imágenes al mensaje",
107107
"sendMessage": "Enviar mensaje",
108+
"stopTts": "Detener texto a voz",
108109
"typeMessage": "Escribe un mensaje...",
109110
"typeTask": "Escribe tu tarea aquí...",
110111
"addContext": "@ para agregar contexto, / para cambiar modos",

‎webview-ui/src/i18n/locales/fr/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "Améliorer la requête avec un contexte supplémentaire",
106106
"addImages": "Ajouter des images au message",
107107
"sendMessage": "Envoyer le message",
108+
"stopTts": "Arrêter la synthèse vocale",
108109
"typeMessage": "Écrivez un message...",
109110
"typeTask": "Écrivez votre tâche ici...",
110111
"addContext": "@ pour ajouter du contexte, / pour changer de mode",

‎webview-ui/src/i18n/locales/hi/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "अतिरिक्त संदर्भ के साथ प्रॉम्प्ट बढ़ाएँ",
106106
"addImages": "संदेश में चित्र जोड़ें",
107107
"sendMessage": "संदेश भेजें",
108+
"stopTts": "टेक्स्ट-टू-स्पीच बंद करें",
108109
"typeMessage": "एक संदेश लिखें...",
109110
"typeTask": "अपना कार्य यहां लिखें...",
110111
"addContext": "संदर्भ जोड़ने के लिए @, मोड बदलने के लिए /",

‎webview-ui/src/i18n/locales/id/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
},
127127
"addImages": "Tambahkan gambar ke pesan",
128128
"sendMessage": "Kirim pesan",
129+
"stopTts": "Hentikan text-to-speech",
129130
"typeMessage": "Ketik pesan...",
130131
"typeTask": "Bangun, cari, tanya sesuatu",
131132
"addContext": "@ untuk menambah konteks, / untuk ganti mode",

‎webview-ui/src/i18n/locales/it/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "Migliora prompt con contesto aggiuntivo",
106106
"addImages": "Aggiungi immagini al messaggio",
107107
"sendMessage": "Invia messaggio",
108+
"stopTts": "Interrompi sintesi vocale",
108109
"typeMessage": "Scrivi un messaggio...",
109110
"typeTask": "Scrivi la tua attività qui...",
110111
"addContext": "@ per aggiungere contesto, / per cambiare modalità",

‎webview-ui/src/i18n/locales/ja/chat.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
"enhancePrompt": "追加コンテキストでプロンプトを強化",
106106
"addImages": "メッセージに画像を追加",
107107
"sendMessage": "メッセージを送信",
108+
"stopTts": "テキスト読み上げを停止",
108109
"typeMessage": "メッセージを入力...",
109110
"typeTask": "ここにタスクを入力...",
110111
"addContext": "コンテキスト追加は@、モード切替は/",

0 commit comments

Comments
 (0)