Chat: Add tooltip to disabled chat model selector (#2294)

Improves the tooltip for chats that can't change the model, and for Enterprise instances. Fixes #2196 Also includes some fixes to unscoped styles that were leaking globally. ## Test plan - Logged in dot com free. Opened a new chat. Hovered over chat model selector. - Logged in dot com pr. Opened a new chat. Hovered over chat model selector. - Logged in Enterprise. Opened a new chat. Hovered over chat model selector. - Visually inspected enhanced context selector & dropdown for now style changes
sourcegraph · Dec 12, 2023 · c71813e · c71813e
1 parent db9cfec
commit c71813e
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 45 deletions.
diff --git a/vscode/webviews/Components/ChatModelDropdownMenu.module.css b/vscode/webviews/Components/ChatModelDropdownMenu.module.css
@@ -3,7 +3,7 @@
     border-bottom: solid 1px var(--vscode-sideBarSectionHeader-border);
 }
 
-svg {
+.container svg {
     opacity: 0.8;
 }
 
@@ -12,48 +12,48 @@ svg {
     font-size: 12px;
 }
 
-vscode-dropdown {
+.container vscode-dropdown {
     border-radius: 2px;
     border: none;
     background: none;
 }
 
-vscode-dropdown:focus,
-vscode-dropdown:focus-visible,
-vscode-dropdown:focus-within,
-vscode-dropdown:focus::part(listbox),
-vscode-dropdown:focus-visible::part(listbox),
-vscode-dropdown:focus-within::part(listbox) {
+.container vscode-dropdown:focus,
+.container vscode-dropdown:focus-visible,
+.container vscode-dropdown:focus-within,
+.container vscode-dropdown:focus::part(listbox),
+.container vscode-dropdown:focus-visible::part(listbox),
+.container vscode-dropdown:focus-within::part(listbox) {
     outline: 1px solid var(--vscode-focusBorder);
     outline-offset: -1px;
 }
 
-vscode-dropdown::part(indicator) {
+.container vscode-dropdown::part(indicator) {
     margin-inline-start: 6px;
     opacity: 0.8;
 }
 
-vscode-dropdown[disabled] {
+.container vscode-dropdown[disabled] {
     opacity: 0.6;
 }
 
-vscode-dropdown[disabled]::part(indicator) {
+.container vscode-dropdown[disabled]::part(indicator) {
     display: none;
 }
 
-vscode-dropdown[disabled]::part(control),
-vscode-dropdown[disabled]::part(listbox) {
+.container vscode-dropdown[disabled]::part(control),
+.container vscode-dropdown[disabled]::part(listbox) {
     cursor: default;
 }
 
-vscode-dropdown::part(listbox) {
+.container vscode-dropdown::part(listbox) {
     width: auto;
     border-radius: 2px;
     padding: 2px;
     background-color: var(--vscode-dropdown-listBackground, var(--vscode-dropdown-background));
 }
 
-vscode-dropdown[disabled]::part(listbox) {
+.container vscode-dropdown[disabled]::part(listbox) {
     cursor: pointer;
 }
 
@@ -63,12 +63,12 @@ vscode-dropdown[disabled]::part(listbox) {
     align-items: center;
 }
 
-vscode-option[disabled] {
+.container vscode-option[disabled] {
     cursor: pointer;
     opacity: unset;
 }
 
-vscode-option::part(content) {
+.container vscode-option::part(content) {
     padding: 6px 8px;
     display: flex;
     gap: 6px;
@@ -91,7 +91,7 @@ vscode-option::part(content) {
     color: rgba(255,255,255,0.9);
 }
 
-vscode-option:hover .badge {
+.container vscode-option:hover .badge {
     box-shadow:
         0px 0px 2px 1px var(--vscode-dropdown-listBackground, var(--vscode-dropdown-background)),
         0px 0px 4px 0px var(--list-active-selection-foreground),
@@ -104,4 +104,4 @@ vscode-option:hover .badge {
 
 .disabled {
     opacity: 0.6;
-}
+}
diff --git a/vscode/webviews/Components/ChatModelDropdownMenu.tsx b/vscode/webviews/Components/ChatModelDropdownMenu.tsx
@@ -53,22 +53,17 @@ export const ChatModelDropdownMenu: React.FunctionComponent<ChatModelDropdownMen
         return null
     }
 
-    const tooltips = {
-        enabled: 'Select a chat model',
-        disabled: {
-            codyProUser: `This chat is using ${currentModel.title}. Start a new chat to choose a different model.`,
-            dotComUser: 'Upgrade to Cody Pro to use a different chat model.',
-            enterpriseUser: `${currentModel.title} is the default chat model on your Sourcegraph instance.`,
-        },
-    }
-
     return (
         <div className={styles.container}>
             <VSCodeDropdown
                 disabled={disabled}
                 className={styles.dropdownContainer}
                 onChange={handleChange}
-                title={isEnterpriseUser ? tooltips.disabled.enterpriseUser : undefined}
+                title={
+                    disabled
+                        ? `This chat is using ${currentModel.title}. Start a new chat to choose a different model.`
+                        : undefined
+                }
                 onClick={() =>
                     getVSCodeAPI().postMessage({
                         command: 'event',
@@ -94,6 +89,7 @@ export const ChatModelDropdownMenu: React.FunctionComponent<ChatModelDropdownMen
                                 styles.titleContainer,
                                 isModelDisabled(option.codyProOnly) && styles.disabled
                             )}
+                            title={isEnterpriseUser ? 'Chat model set by your Sourcegraph Enterprise admin' : undefined}
                         >
                             <span className={styles.title}>{option.title}</span>
                             <span className={styles.provider}>{` by ${option.provider}`}</span>

diff --git a/vscode/webviews/Components/EnhancedContextSettings.module.css b/vscode/webviews/Components/EnhancedContextSettings.module.css
@@ -1,28 +1,28 @@
-.enhanced-context-settings-popup {
+.popup {
     max-width: 300px;
     cursor: default;
 }
 
-.enhanced-context-inner-container {
+.container {
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
 }
 
-.enhanced-context-settings-popup label {
+.popup label {
     display: block;
     margin-bottom: 0.2rem;
 }
 
-.enhanced-context-settings-popup label h1 {
+.popup label h1 {
     text-transform: none;
     font-weight: 600;
     display: inline;
     cursor: pointer;
     user-select: none;
 }
 
-.enhanced-context-settings-popup > p {
+.popup > p {
     display: block;
 }
 
@@ -98,32 +98,32 @@
     font-weight: normal;
 }
 
-.enhanced-context-settings-popup i {
+.popup i {
     opacity: 0.8;
 }
 
-vscode-checkbox {
+.popup vscode-checkbox {
     margin-top: 0;
 }
 
 /*
     vscode-checkbox and vscode-button is missing the borders and focus styles that built-in VS
     controls have (perhaps out of date?) so we need to add them in ourselves
 */
-vscode-checkbox::part(control) {
+.popup vscode-checkbox::part(control) {
     background-color: var(--vscode-checkbox-background);
     border: 1px solid var(--vscode-checkbox-border);
 }
 
-vscode-checkbox:focus::part(control),
-vscode-checkbox:focus-visible::part(control),
-vscode-checkbox:focus-within::part(control) {
+.popup vscode-checkbox:focus::part(control),
+.popup vscode-checkbox:focus-visible::part(control),
+.popup vscode-checkbox:focus-within::part(control) {
     border-color: var(--vscode-focusBorder);
 }
 
-vscode-button:focus::part(control),
-vscode-button:focus-visible::part(control),
-vscode-button:focus-within::part(control) {
+.popup vscode-button:focus::part(control),
+.popup vscode-button:focus-visible::part(control),
+.popup vscode-button:focus-within::part(control) {
     outline: 1px solid var(--vscode-focusBorder);
     outline-offset: 2px;
 }

diff --git a/vscode/webviews/Components/EnhancedContextSettings.tsx b/vscode/webviews/Components/EnhancedContextSettings.tsx
@@ -215,9 +215,9 @@ export const EnhancedContextSettings: React.FunctionComponent<EnhancedContextSet
             <PopupFrame
                 isOpen={isOpen}
                 onDismiss={() => setOpen(false)}
-                classNames={[popupStyles.popupTrail, styles.enhancedContextSettingsPopup]}
+                classNames={[popupStyles.popupTrail, styles.popup]}
             >
-                <div className={styles.enhancedContextInnerContainer}>
+                <div className={styles.container}>
                     <div>
                         <VSCodeCheckbox onChange={enabledChanged} checked={enabled} id="enhanced-context-checkbox" />
                     </div>